<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>Hello world!</div>

  <script>
    const div = document.querySelector('div')

    // 替换元素的内容
    div.innerHTML = 'Hello world! 2'

    // 循环添加内容
    {
      const count = 10000

      // 错误写法
      /* for (let i = 0; i < count; i++) {
        div.innerHTML += `<p>Hello world! ${i}</p>`
      } */

      // 正确写法
      const arr = []
      for (let i = 0; i < count; i++) {
        arr.push(`<p>Hello world! ${i}</p>`)
      }
      const html = arr.join('')
      div.innerHTML += html
    }
  </script>
</body>

</html>